<template>
  <div class='index'>
    <!-- v-model双向绑定哪一个下标是活动状态 -->
    <van-tabs v-model="activeIndex">
      <van-tab v-for="(item, index) in channels" :key="index" :title="item.name">
        <!-- 在父组件index.vue中把频道信息传递给子组件articleList.vue
        article-list放在for循环中，但是并不会立刻创建子组件出来，而是具有懒加载效果，激活tab标签点击才加载
        -->
        <article-list :channel="item" @showMoreAction="hShowMoreAction"></article-list>
      </van-tab>
    </van-tabs>
    <!-- 频道列表 开关 通过定位 -->
    <div class="bar-btn" @click="hShowChannelEdit">
        <van-icon name="wap-nav" size="24" />
    </div>
    <!-- 频道列表 -->
    <!-- 文章-更多操作
    给子组件加一个ref之后，就可以在当前组件中通过this.$refs.refMoreAction访问当前子组件
    -->
    <van-popup v-model="showMoreAction" :style="{ width: '80%' }" >
      <!-- 父组件监听子组件不感兴趣事件 -->
      <more-action
      ref="refMoreAction"
      @dislike="hDislike"
      @report="hReport"></more-action>
    </van-popup>

    <!-- 频道管理 用动作面板van-action-sheet包起来
    父传子：把当前订阅频道传给频道编辑组件:channels="channels"
        把当前激活的频道下标也传给子组件
    子传父：监听close和updateCurChannel和updateCurIndex事件，关闭弹层和切换到当前频道,更新激活频道下标
    -->
    <van-action-sheet v-model="showChannelEdit" title="频道管理">
      <channel-edit
      ref="refChannelEdit"
      :channels="channels"
      :activeIndex="activeIndex"
      @updateCurIndex="hUpdateCurIndex"
      @close="hCloseChannelEdit"
      @updateCurChannel="hUpdateCurChannel"></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
import { dislikeArticle, reportArticle } from '@/api/article.js';
import { getChannels } from '@/api/channel.js';
import ArticleList from './articleList';
import MoreAction from './moreAction';
import ChannelEdit from './channelEdit';
export default {
  name: 'HomeIndex',
  props: { },
  data () {
    return {
      activeIndex: 0, // 当前选中的频道下标
      articleId: null, // 当前要执行更多操作的文章编号
      showMoreAction: false, // 是否显示更多操作的弹层
      showChannelEdit: false, // 是否显示编辑频道的弹层
      channels: [] // 频道列表，当前用户已经订阅的频道
    };
  },
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  computed: { },
  created () {
    this.loadChannels();
  },
  mounted () { },
  methods: {
    // 点击频道编辑按钮
    hShowChannelEdit () {
      this.showChannelEdit = true;
      if (this.$refs.refChannelEdit) {
        this.$refs.refChannelEdit.editing = false;
      }
    },
    // 更新激活频道的下标
    hUpdateCurIndex (index) {
      this.activeIndex = index;
    },
    // 关闭频道编辑弹层
    hCloseChannelEdit () {
      // 频道编辑弹层隐藏
      this.showChannelEdit = false;
    },
    // 处理子组件中抛出的更新当前频道项的事件
    hUpdateCurChannel (channel) {
      console.log('点击我的频道', channel);
      // 根据频道id找频道索引
      const idx = this.channels.findIndex(item => item.id === channel.id);
      // 点击我的频道的某一个频道时，van-tabs切到这个频道上
      this.activeIndex = idx;
    },
    // 封装删除文章
    delArticle () {
      // 删除文章
      // 数据不是当前用户独有的，该用户不喜欢，别的用户可能喜欢，不能从后端删除数据，只能删除当前数据
      // 删除articleList组件中的list数组中的对应id的哪一项
      // 在父组件index.vue中去删除子组件articleList中的数据
      // 因为父组件有多个articleList子组件，所以用事件总线实现删除

      // 事件总线发布消息
      // 参数是一个对象，表示当前要删除的文章编号
      const eventObj = {
        articleId: this.articleId,
        channelId: this.channels[this.activeIndex].id
      };
      this.$eventBus.$emit('delArticle', eventObj);
    },
    // 更多操作-不感兴趣
    async hDislike () {
      const result = await dislikeArticle(this.articleId);
      console.log(result);
      this.$toast.success('操作成功');
      // 关闭弹层
      this.showMoreAction = false;
      // 删除文章
      this.delArticle();
    },
    // 更多操作-举报
    async hReport (reportTypeId) {
      console.log('收到举报，类型是', reportTypeId);
      // 1.调用接口
      await reportArticle(this.articleId, reportTypeId);
      // 2.关闭弹层
      this.$toast.success('操作成功');
      this.showMoreAction = false;
      // 3.删除文章
      this.delArticle();
    },
    // 从子组件articleList中收到点击x事件，并保存要删除的文章编号
    hShowMoreAction (articleId) {
      // 父组件监听事件，监听article-list中传出来的showMoreAction事件
      this.showMoreAction = true;
      this.articleId = articleId;

      // 确保每次点击更多操作时，moreAction组件中的isReport设置为false
      // 本质上是在父组件中去修改子组件的数据
      // 1.给子组件添加引用<more-action ref="refMoreAction"
      // 2.格式：this.$refs.子组件引用.子组件数据 = 新值
      if (this.$refs.refMoreAction) { // 确保子组件渲染出来再去获取，只有弹层出来以后才会创建出来，第一次点击的时候获取不到
        console.log(this.$refs); // 当前组件的所有子组件的引用
        console.log(this.$refs.refMoreAction);
        this.$refs.refMoreAction.isReport = false;
      }
      // this.$refs.refMoreAction &&（this.$refs.refMoreAction.isReport = false);
    },
    async loadChannels () {
      const result = await getChannels();
      console.log(result);
      this.channels = result.data.data.channels;
    }
  }
};
</script>

<style scoped lang='less'></style>
